<script lang="ts" setup></script>

<template>
  <section class="relative w-full mt-180px px-48 pt-94px">
    <div class="absolute w-full top-0 left-0 h-400px" style="background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%); z-index: -1"></div>
    <h2 class="flex justify-center items-center font-bold">
      <span class="text-size-60px text-hex-0A87F8">1000+</span>
      <span class="leading-60px text-size-44px font-bold">功能, 全面提升公寓管理数字化水平</span>
    </h2>
    <p class="text-size-24px text-hex-777 leading-33px text-center">即刻上手，构建你的数字化运营体系</p>
    <div class="flex w-full h-180px justify-center items-center mt-100px">
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/fygl1.png" alt="房源管理" />
        <div class="text-size-22px leading-30px mt-20px">房源管理</div>
        <p class="text-center text-hex-777 mt-8px">出租率统计，快速查空房</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/hygl2.png" alt="合约管理" />
        <div class="text-size-22px leading-30px mt-20px">合约管理</div>
        <p class="text-center text-hex-777 mt-8px">支持电子签约，定制合同</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/cwgl3.png" alt="财务管理" />
        <div class="text-size-22px leading-30px mt-20px">财务管理</div>
        <p class="text-center text-hex-777 mt-8px">自动催缴，线上代付</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/xsgl4.png" alt="线索管理" />
        <div class="text-size-22px leading-30px mt-20px">线索管理</div>
        <p class="text-center text-hex-777 mt-8px">轻松跟进客户线索</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/hygl5.png" alt="会员管理" />
        <div class="text-size-22px leading-30px mt-20px">会员管理</div>
        <p class="text-center text-hex-777 mt-8px">资料集中，个性化服务</p>
      </div>
    </div>
    <div class="flex w-full h-180px justify-center mt-40px">
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/dzgl6.png" alt="短租管理" />
        <div class="text-size-22px leading-30px mt-20px">短租管理</div>
        <p class="text-center text-hex-777 mt-8px">旺季长租，淡季短租</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/fjgl7.png" alt="多经管理" />
        <div class="text-size-22px leading-30px mt-20px">多经管理</div>
        <p class="text-center text-hex-777 mt-8px">自定义经营空间</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/xfgl8.png" alt="巡房管理" />
        <div class="text-size-22px leading-30px mt-20px">巡房管理</div>
        <p class="text-center text-hex-777 mt-8px">自动下发巡房任务</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/zcgl9.png" alt="资产管理" />
        <div class="text-size-22px leading-30px mt-20px">资产管理</div>
        <p class="text-center text-hex-777 mt-8px">实时追踪库存</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/bagl10.png" alt="备案管理" />
        <div class="text-size-22px leading-30px mt-20px">备案管理</div>
        <p class="text-center text-hex-777 mt-8px">备案房源合同，确保合规</p>
      </div>
    </div>
    <div class="flex w-full h-180px justify-center mt-40px">
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/zngl11.png" alt="智能设备" />
        <div class="text-size-22px leading-30px mt-20px">智能设备</div>
        <p class="text-center text-hex-777 mt-8px">自动抄表、自动断水电</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/zhfw12.png" alt="租后服务" />
        <div class="text-size-22px leading-30px mt-20px">租后服务</div>
        <p class="text-center text-hex-777 mt-8px">维修保洁，线上解决</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/sjzx14.png" alt="数据中心" />
        <div class="text-size-22px leading-30px mt-20px">数据中心</div>
        <p class="text-center text-hex-777 mt-8px">全面运营情况盈亏分析</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/spgl13.png" alt="审批管理" />
        <div class="text-size-22px leading-30px mt-20px">审批管理</div>
        <p class="text-center text-hex-777 mt-8px">自动审批，提高效率</p>
      </div>
      <div class="flex flex-col items-center justify-center w-220px px-22px py-24px mx-12px itemActive">
        <img class="w-48px h-48px" src="/public/images/icon/yxzx15.png" alt="营销中心" />
        <div class="text-size-22px leading-30px mt-20px">营销中心</div>
        <p class="text-center text-hex-777 mt-8px">多种促销手段提升出房率</p>
      </div>
    </div>
  </section>
</template>

<style scoped>
.itemActive {
  cursor: pointer;
  border-radius: 0;
  border-width: 0;
  background: rgba(255, 255, 255, 0);
  border-radius: 0;
  box-shadow: none;
  transition: all 0.25s;
}
.itemActive:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  transition: all 0.25s;
}
</style>
